<template>
    <div class="app-container">
      <!-- 输入表单 -->
      <el-form label-width="120px">
        <el-form-item label="赛程甲队">
            <el-select v-model="match.clueIda" clearable placeholder="请选择">
                <el-option
                v-for="item in clueList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="赛程乙队">
            <el-select v-model="match.clueIdb" clearable placeholder="请选择">
                <el-option
                v-for="item in clueList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="甲乙比分">
          <el-input v-model="match.score" />
        </el-form-item>

        <el-form-item label="赛程时间">
            <el-date-picker
            v-model="match.matchTime"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions">
            </el-date-picker>
        </el-form-item>
        
        <el-form-item label="赛程预约数">
          <el-input-number v-model="match.subscribeNum" :min="0"/>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  
  <script>
  import matchApi from "@/api/match/match";
  import clueApi from "@/api/clue/clue";
  export default {
      data() {
          return {
              match:{
                subscribeNum: 0
              },
              clueList: [],
              pickerOptions: {
              
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date());
                }
              }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                }
              }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                }
              }]
            },
          }
      },
      created() {
        clueApi.getClueList()
        .then((response) =>{
            this.clueList = response.data
        })
        if(this.$route.params.id){
          const id = this.$route.params.id;
          this.fetchDataById(id)
        }
      },
      methods: {
        fetchDataById(id){
          matchApi.getMatchById(id)
          .then(response => {
            this.match = response.data
          })
        },
        //添加
        save(){
          matchApi.saveMatch(this.match)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '添加成功!'
              });
              //跳转列表页面
              this.$router.push({path:'/match/matchList'})
          })
        },
        //修改
        update(){
          matchApi.updateMatch(this.match)
          .then((response) => {
              this.$message({
                  type: 'success',
                  message: '修改成功!'
              });
              //跳转列表页面
              this.$router.push({path:'/match/matchList'})
          })
        },
        saveOrUpdate(){
          if(this.match.id){
            this.update()
          }else{
            this.save()
          }
        }
      },
      
  }
  </script>